<template>
    <div class="message">
        <div class="nickname">
            {{ nickname}}
        </div>
        <div class="content">
            {{ props.message.message }}
        </div>
        <div class="time">
            {{ timeStr }}
        </div>
    </div>
</template>

<script lang="ts" setup>import type { MessageInterface } from "@/type/IMModels";
import type {UserInterface} from "@/type/models";
import {computed} from "vue";

const props = defineProps<{ message: MessageInterface , currentTalk:UserInterface}>();
const nickname = computed(()=>{
    if(props.currentTalk.uid == props.message.toUid){
        return props.currentTalk.nickname
    }else{
        return JSON.parse(localStorage.getItem("user") as string).nickname
    }
})
const timeStr = computed(()=>{
    let date = props.message.time;
    if (typeof date === 'string') {
        date = new Date(date);
    }
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
})
</script>
<style scoped>
.nickname {
    color: black;
    font-family: 微软雅黑, serif;
    font-size: 18px;
}

.content {
    border-radius: 5px;
    background-color: white;
    font-family: "HarmonyOS Sans SC", serif;
    font-size: 25px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    display: inline-block;
    min-width: 20px;
    max-width: 500px;
}

.time {
    font-family: "HarmonyOS Sans SC", serif;
    font-size: 13px;
}
.message{
    margin-bottom: 20px;
}
</style>